<template>
  <div class="comment">
    <div class="reviewMenu">
      <h3>影评</h3>
      <div style="float: left;vertical-align: center;margin-left: 900px;cursor: default" @click="expand()" >
        <h4>{{this.showCommentList ? '收起': '查看更多'}}</h4>
      </div>
    </div>
    <div>
      <div v-for="(comment, i) in comments" v-if="i<2 && comments.length!=0" :key="i" class="author-title reply-father">
        <el-avatar class="header-img" :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <div class="author-info">
          <span class="author-name">{{ comment.userName }}</span>
          <span class="author-time" style="float:left;">{{ comment.publishDate }}</span>
        </div>
        <!-- 点赞-->
        <div class="icon-btn">
          <span @click="showReplyInput(i, comment.userName, comment.parentId)">
            <i class="iconfont el-icon-s-comment"></i>{{ comment.replyNum }}
          </span>
<!--          检测是否被点赞-->
          <span v-if="comment.likeNum!==0"><img src="http://121.36.91.36/inner/images/like.png" style="height: 17px;" @click="like(comment.commentId)">{{ comment.likeNum }}</span>
          <span v-if="comment.likeNum==0"><img src="http://121.36.91.36/inner/images/dislike.png" style="height: 17px" @click="like(comment.commentId)">{{ comment.likeNum }}</span>
          <div style="display: inline-block;cursor: pointer" @click="expandCommentReply(i)"><i style="margin-left: 10px" class="el-icon-caret-bottom">展开回复</i></div>
        </div>
<!--        内容-->
        <div class="talk-box">
          <p>
            <span class="reply"> {{ comment.commentInfo }}</span>
          </p>
        </div>
<!--        子评论-->
        <div v-show="_replyShow(i)" class="reply-box">
          <div v-for="(reply, j) in comment.reply" :key="j" class="author-title">
            <el-avatar
                class="header-img"
                :size="40"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <div class="author-info">
              <span class="author-name">{{ reply.userName }}</span>
              <span class="author-time">{{ reply.publishDate }}</span>
            </div>
            <div class="icon-btn">
              <span v-if="reply.likeNum!==0"><img src="http://121.36.91.36/inner/images/like.png" style="height: 17px;" @click="like(reply.commentId)">{{ reply.likeNum }}</span>
              <span v-if="reply.likeNum==0"><img src="http://121.36.91.36/inner/images/dislike.png" style="height: 17px" @click="like(reply.commentId)">{{ reply.likeNum }}</span>
<!--              <i-->
<!--                  v-if="reply.likeNum!==0"-->
<!--                  class="iconfont el-icon-caret-top likeIcon"-->
<!--                  @click="like(reply.commentId)"-->
<!--              ></i>-->
<!--&lt;!&ndash;              无点赞的样式&ndash;&gt;-->
<!--              <i-->
<!--                  v-else-->
<!--                  class="iconfont el-icon-caret-top"-->
<!--                  @click="like(reply.commentId)"-->
<!--              ></i-->
<!--              >{{ reply.likeNum }}-->
            </div>
            <div class="talk-box">
              <p>
<!--                回复<span> @{{ reply.parentName }}: </span>-->
                <span class="reply"> {{ reply.commentInfo }}</span>
              </p>
            </div>
            <div class="reply-box"></div>
          </div>
        </div>
<!--        子评论回复-->
        <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
          <el-avatar class="header-img" :size="40" :src="avatar"></el-avatar>
          <div class="reply-info">
            <div
                tabindex="0"
                contenteditable="true"
                spellcheck="false"
                :placeholder="placeholder"
                @input="onDivInput($event)"
                class="reply-input reply-comment-input"
            ></div>
          </div>
          <div class="reply-btn-box">
            <el-button
                class="reply-btn"
                size="medium"
                @click="sendCommentReply(comments[i].commentId)"
                type="primary"
            >发表评论</el-button
            >
          </div>
        </div>
      </div>
      <div v-for="(comment, i) in comments" v-if="i>=2" v-show="showCommentList" :key="i" class="author-title reply-father">
        <el-avatar class="header-img" :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <div class="author-info">
          <span class="author-name">{{ comment.commentTitle }}</span>
          <span class="author-time" style="float:left;">{{ comment.publishDate }}</span>
        </div>
        <!--        点赞-->
        <div class="icon-btn">
          <span @click="showReplyInput(i, comment.userName, comment.parentId)">
            <i class="iconfont el-icon-s-comment"></i>{{ comment.replyNum }}
          </span>
          <!--          检测是否被点赞-->
          <span v-if="comment.likeNum!==0"><img src="http://121.36.91.36/inner/images/like.png" style="height: 17px;" @click="like(comment.commentId)">{{ comment.likeNum }}</span>
          <span v-if="comment.likeNum==0"><img src="http://121.36.91.36/inner/images/dislike.png" style="height: 17px" @click="like(comment.commentId)">{{ comment.likeNum }}</span>
          <div style="display: inline-block;cursor: pointer" @click="expandCommentReply(i)"><i style="margin-left: 10px" class="el-icon-caret-bottom">展开回复</i></div>
        </div>
        <!--        内容-->
        <div class="talk-box">
          <p>
            <span class="reply"> {{ comment.commentInfo }}</span>
          </p>
        </div>
        <div v-show="_replyShow(i)" class="reply-box">
          <div v-for="(reply, j) in comment.reply" :key="j" class="author-title">
            <el-avatar
                class="header-img"
                :size="40"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <div class="author-info">
              <span class="author-name">{{ reply.userName }}</span>
              <span class="author-time">{{ reply.publishDate }}</span>
            </div>
            <div class="icon-btn">
              <!--              这里禁止对子评论回复-->
              <span v-if="reply.likeNum!==0"><img src="http://121.36.91.36/inner/images/like.png" style="height: 17px;" @click="like(reply.commentId)">{{ reply.likeNum }}</span>
              <span v-if="reply.likeNum==0"><img src="http://121.36.91.36/inner/images/dislike.png" style="height: 17px" @click="like(reply.commentId)">{{ reply.likeNum }}</span>
            </div>
            <div class="talk-box">
              <p>
                <!--                回复<span> @{{ reply.parentName }}: </span>-->
                <span class="reply"> {{ reply.commentInfo }}</span>
              </p>
            </div>
            <div class="reply-box"></div>
          </div>
        </div>
        <!--        子评论回复-->
        <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
          <el-avatar class="header-img" :size="40" :src="avatar"></el-avatar>
          <div class="reply-info">
            <div
                tabindex="0"
                contenteditable="true"
                spellcheck="false"
                :placeholder="placeholder"
                @input="onDivInput($event)"
                class="reply-input reply-comment-input"
            ></div>
          </div>
          <div class="reply-btn-box">
            <el-button
                class="reply-btn"
                size="medium"
                @click="sendCommentReply(comments[i].commentId)"
                type="primary"
            >发表评论</el-button
            >
          </div>
        </div>
      </div>
      <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
        <el-avatar class="header-img" :size="40" :src="avatar"></el-avatar>
        <div class="reply-info">
          <div
              tabindex="0"
              contenteditable="true"
              id="replyInput"
              spellcheck="false"
              placeholder="输入评论..."
              class="reply-input"
              @focus="showReplyBtn"
              @input="onDivInput($event)"
          ></div>
        </div>
        <div class="reply-btn-box" v-show="btnShow">
          <el-button
              class="reply-btn"
              size="medium"
              @click="sendComment(-1)"
              type="primary"
          >发表评论</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  name: "ComTest", // 组件名称
  props:{
    movieId:{
      type:String,
    }
  },
  data() {
    return {
      showCommentList: false,//是否展开列表
      placeholder: "", // 回复者名称
      btnShow: false,
      index: "0",
      replyComment: "", // 评论输入内容
      username: "jaychou", // 登录的用户名
      avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", // 登录用户头像
      userId: "", // 登录用户id
      parentName: "", // 回复的对象（父评论）用户名
      parentId: 0, // 父id
      itemId: "6666", // 文章等等id
      comment:{},
      comments: [{}],
      // comments: [
      //   {
      //     username:'Lana Del Rey',
      //     id:19870621,
      //     avatar:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
      //     parentName:'', // 父评论名
      //     parentId:'', // 父评论id
      //     comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
      //     time:'2019年9月16日 18:43',
      //     commentNum:2, // 该评论的回复条数
      //     like:15, // 点赞
      //     likeFlag: true, // 点赞图标状态颜色变化
      //     inputShow:false, // 输入框隐藏
      //     reply:[
      //         {
      //             username:'Taylor Swift',
      //             id:19891221,
      //             avatar:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
      //             parentName:'Lana Del Rey',
      //             parentId:19870621,
      //             comment:'我很喜欢你的新专辑！！',
      //             time:'2019年9月16日 18:43',
      //             commentNum:1,
      //             like:15,
      //             likeFlag: true, // 点赞图标状态颜色变化
      //             inputShow:false
      //         }
      //     ]
      //   },
      // ],
    };
  },
  directives: { clickoutside },
  created() {
    this.getOriginComments()
    // 注意this
    // 获取用户登录信息
    // this.getLoginUser();
  },
  methods: {
    getLoginUser() {
      // 后台session获取登录信息
      axios.get("http://localhost:8080/ts/tuser/getLoginUser").then((resp) => {
        if (resp.data.success) {
          let user = resp.data.data.user;
          console.log(user);
          if (user == null) {
            this.avatar = "https://s1.ax1x.com/2022/06/10/Xc9lUf.png"; // 没登陆时，默认头像地址
          } else {
            this.username = user.username;
            this.userId = user.id;
            console.log(this.userId)
            this.avatar = user.avatar;
          }
        }
      }).finally(()=>{
        this.myrefresh() // 刷新
      });
    },
    inputFocus() {
      var replyInput = document.getElementById("replyInput");
      replyInput.style.padding = "8px 8px";
      replyInput.style.border = "2px solid #409EFF";
      replyInput.focus();
    },
    showReplyBtn() {
      this.btnShow = true;
    },
    hideReplyBtn() {
      this.btnShow = false;
      replyInput.style.padding = "10px";
      replyInput.style.border = "none";
    },
    showReplyInput(i, name, id) {
      this.comments[i].inputShow = !this.comments[i].inputShow;
      this.parentName = name;
      this.parentId = id;
      this.placeholder = "回复 @" + name;
      //alert(i)
    },
    _inputShow(i) {
      // console.log(this.comments[i].inputShow)
      return this.comments[i].inputShow;
    },
    sendComment(parentId) {
      // 父评论
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      }
      else {
        this.comment.toId = this.movieId
        this.comment.parentId = parentId
        this.comment.commentTitle = "讨论"
        this.comment.commentInfo = this.replyComment
        this.comment.commentType = 1
        this.request.post("/comment/publish", this.comment).then((res) => {
              if (res.code == 0) {
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
            })
            .finally(() => {
              this.getOriginComments();
            });
        document.getElementById("replyInput").innerHTML = "";
        this.replyComment = "";
      }
    },
    sendCommentReply(parentId) {
      // 子回复提交
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      } else {
        // 组装请求数据
        this.comment.toId = this.movieId
        this.comment.parentId = parentId
        this.comment.commentTitle = "讨论"
        this.comment.commentInfo = this.replyComment
        this.comment.commentType = 1
        this.request.post("/comment/publish", this.comment).then((res) => {
          if (res.code == 0) {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        }).finally(() => {
              this.getOriginComments();
        });
        this.replyComment = "";
        document.getElementsByClassName("reply-comment-input")[i].innerHTML =
            "";
      }
    },
    onDivInput: function (e) {
      this.replyComment = e.target.innerHTML;
    },
    like(id) {
      let a = {
        commentId: id,
      };
      this.request.post("/comment/likeComment", a).then(res => {
        if (res.code == 0){
          this.getOriginComments()
        }else{
          this.$message.error(res.message)
        }
      });
    },
    getOriginComments(){
      this.request.get("/comment/visitor/getCommentByMovieId",{
        params:{
          movieId:this.movieId,
          parentId: -1,
        }
      }).then(res=>{
        if (res.code ==0){
          // this.comments = res.data
          if (res.data!=undefined){
            this.comments = res.data.map((item) => ({...item, replyShow: false,inputShow: false}));
          }else{
            this.comments = []
          }

        }else{
          this.$message.error(res.message)
        }
      })
    },
    expand(){
      this.showCommentList = ! this.showCommentList
    },
    expandCommentReply(i){
      // console.log(this.comments[i].replyShow==undefined)
      this.comments[i].replyShow = !this.comments[i].replyShow;
      console.log(this.comments[i].replyShow)
      },
    _replyShow(i){
      // return true;
      return this.comments[i].replyShow;
    }
  },
  watch:{
    $route(){
      if(this.$route.query){
        this.getOriginComments()
      }
    }
  }
};
</script>
